<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Bootstrap-->
    <link href="../../project/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/mystyle.css" rel="stylesheet">

    <title></title>
</head>
<body>
<!-- Header -->
<div class="nav navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img alt="Brand" src="img/icon_white.png" class="img-header" align="left">
                <p class="left navbar-text-style">BattleBrainsSDU</p>
            </a>
        </div>
    </div>
    <hr style="margin: 0px 0px;">
</div>
<!-- Navbar-static-top -->
<nav class="navbar navbar-default navbar-static-top" style="background-color: #0099CC;">
    <div class="container-fluid">

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav navbar-left">
                <li id="about1" class="active">
                    <a href="#about">
                        <span class="fa fa-home"></span>
                        <span>Главная</span>
                    </a>
                </li>
                <li id="pages1">
                    <a href="#pages">
                        <span class="fa fa-newspaper-o"></span>
                        <span>Разделы</span>
                    </a>
                </li>
                <li id="comments1">
                    <a href="#comments">
                        <span class="fa fa-comments"></span>
                        <span>Комментарий</span>
                    </a>
                </li>
                <li id="helps1">
                    <a href="#helps">
                        <span class="fa fa-plus"></span>
                        <span>Помощь</span>
                    </a>
                </li>
                <li id="contacts1">
                    <a href="#contacts">
                        <span class="fa fa-send"></span>
                        <span>Контакты</span>
                    </a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="registration_page.html" role="button">
                        <span class="fa fa-user-plus"></span>
                        <span>Create account</span>
                    </a>
                </li>
                <li class="dropdown border-left-solid">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
                        <span>Sign in</span>
                        <span class="fa fa-sign-in"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li style="width:250px">
                            <div class="row">
                                <div class="col-10" style="margin-left: 20px;">
                                    <form class="form-horizontal" method="post" action="authorization.php">
                                        <div class="form-group">
                                            <input type="email" class="form-control" placeholder="E-mail" name="e_mail">
                                        </div>
                                        <div class="form-group">
                                            <input type="password" class="form-control" placeholder="Password"
                                                   name="password">
                                        </div>
                                        <div class="form-group">
                                            <a href="registration_page.html" class="text-info">Забыли пароль?</a>
                                        </div>
                                        <div class="form-group">
                                            <button type="submit" name="submit" style="float: right;" class="btn btn-success">Sign
                                                in
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
<!-- Carousel -->
<div style="margin-top: -20px" class="carousel slide" data-ride="carousel" id="about"
     data-interval="5000">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#about" data-slide-to="0" class="active"></li>
        <li data-target="#about" data-slide-to="1" class></li>
        <li data-target="#about" data-slide-to="2" class></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item ">
            <img id="images_carousel" src="img/image_car1.jpg" alt="First slide [1000x500]">
            <!-- Carousel caption-->
            <div class="carousel-caption"></div>
        </div>
        <div class="item active">
            <img id="images_carousel" src="img/image_car2.jpg" alt="Second slide [1170x500]">

            <div class="carousel-caption"></div>
        </div>
        <div class="item">
            <img id="images_carousel" src="img/image_car3.jpg" alt="Third slide [1170x500]">

            <div class="carousel-caption"></div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#about" role="button" data-slide="prev">
        <span class="fa fa-chevron-left fa-2x carousel-control-fa-chevron" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#about" role="button" data-slide="next">
        <span class="fa fa-chevron-right fa-2x carousel-control-fa-chevron" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<div class="container-fluid" id="pages" style="background-color: #33B5E5; margin-top: 45px;">
    <!-- Gamification content -->
    <div class="container">
    <div class="row">
        <div class="panel-collapse" style="height: 600px;margin-top:40px">

            <h1 style="text-align: center; color: #ffffff; font-family: Menlo; font-size: 54px">Gamification for learning</h1>

            <div class="row" style="margin-top: 10px">
                <div class="col-4 ">
                    <div>
                        <img src="img/mathan.jpg" class="img-circle circle center-block"
                             style="height: 300px;width: 300px; border: solid 6px #7fbbda">

                        <p class="text-center" style="color: #ffffff; font-size: 24px; font-family: sans-serif">Математика</p>

                        <button class="btn btn-info center-block">Read more</button>
                    </div>
                </div>


                <div class="col-4 ">
                    <div>
                        <img src="img/programming.png" class="img-circle circle center-block"
                             style="height: 300px;width: 300px; border: solid 6px #7fbbda">

                        <p class="text-center" style="color: #ffffff; font-size: 24px; font-family: sans-serif">Программирование</p>
                        <button class="btn btn-info center-block">Read more</button>
                    </div>
                </div>
                <div class="col-4 ">
                    <div>
                        <img src="img/english.png" class="img-circle circle center-block"
                             style="height: 300px;width: 300px; border: solid 6px #7fbbda">

                        <p class="text-center" style="color: #ffffff; font-size: 24px; font-family: sans-serif">Английский</p>
                        <button class="btn btn-info center-block">Read more</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
    <!-- Content news about tournaments -->
<div class="container-fluid" style="margin-top: 45px;">
    <div class="container">
    <div class="row">
        <div class="panel-collapse" id="content_news">
            <div class="my-col-md-3">
                <div class="col-head col-head-text">
                    <span>August 27</span>
                </div>
                <div class="col-content"></div>
            </div>

            <div class="my-col-md-3">
                <div class="col-head">
                    <div class="col-head-text">
                        <span>July 18</span>
                    </div>
                </div>
                <div class="col-content"></div>
            </div>

            <div class="my-col-md-3">
                <div class="col-head col-head-text">
                    <span>August 31</span>
                </div>
                <div class="col-content"></div>
            </div>
        </div>
    </div>
    </div>
</div>



<div id="contacts" class="footer">
    <div class="container">
        <div class="row">
            <div class="col-2">
                <h3>Navigation</h3>

                <p><a href="#about">О нас</a></p>

                <p><a href="#pager">Разделы</a></p>

                <p><a href="#comments">Комментарий</a></p>

                <p><a href="#help">Помощь</a></p>

                <p><a href="#contacts">Контакты</a></p>
            </div>
            <div class="col-2">
                <h3>About</h3>

                <p>t is a long established fact that a reader will be distracted by the readable content of a page when
                    looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal
                    distribution of letters, as opposed to using 'Content here, content here', making it look like
                    readable English. </p>
            </div>

            <div class="col-3">
                <h3>Contact Us</h3>

                <p>Address: Almaty,Kaskelen, SDU</p>

                <p>Phone: +7747-31-33-192</p>

                <p>E-mail: SDU@sdu.edu.kz</p>
            </div>
            <div class="col-3">
                <div id="googleMap" style="width:500px;height:380px;"></div>
            </div>
        </div>
    </div>
</div>
<footer>
    <div class="panel-footer">
        <span class="text-info left"> © 2015 Gamers Team.</span>
        <span class="text-info right" style="float:right">Students of <a href="http://sdu.edu.kz"> Suleyman Demirel
            University</a></span>
    </div>
</footer>
<script src="../../project/js/jquery-1.10.2.js"></script>
<script src="../../project/js/bootstrap.js"></script>
<script src="../../project/js/google_maps_api.js"></script>
<script src="js/main_page.js"></script>
</body>
</html>